<template>
  <div v-if="visible">
    <haday-transfer-selector
      dialogWidth="650px"
      dialogHeight="425px"
      :dialogModal="false"
      :dialogTitle="title"
      :data="mockData"
      :props="selprops"
      :defaultItemChecked="defaultItemChecked"
      :scrollDisabled="scrollDisabled"
      :initDataMethod="initMockData" 
      @get-checked-item="handleOk"
      @close-dialog="handleCancel">
        <template #leftPanel="slotProps">
          <div class="panel"><span>{{ slotProps.item[selprops.key] }}</span><span>{{ slotProps.item[selprops.label] }}</span></div>
        </template>
        <template #rightPanel="slotProps">
          <div class="panel"><span>{{ slotProps.item[selprops.key] }}</span><span>{{ slotProps.item[selprops.label] }}</span></div>
        </template>
        <template #checkEmpty>
          <a-empty :description="false"/>
        </template>
    </haday-transfer-selector>
    <div class="hd-model"></div>
  </div>  
</template>
<script>
import Vue from 'vue'
import {Dialog, Input,Checkbox,Button,Empty,CheckboxGroup,InfiniteScroll} from 'element-ui'; 
Vue.use(Dialog);
Vue.use(Input);
Vue.use(Checkbox);
Vue.use(Button);
Vue.use(Empty);
Vue.use(CheckboxGroup);
Vue.use(InfiniteScroll);
import { getAction } from '@/api/manage'

export default {  
  name: 'PersonSelect',
  props:{
    title:{
      type:String, // 标题
      default:"选择人员",
      required:false
    },
    limit:{
      type:Number, // 限制人数
      default:0,
      required:false
    },
    originTargetKeys:{
      type:Array, // 默认选中的[key]值
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      selprops: {
        key: 'key',
        label: 'realname',
      },
      scrollDisabled: false, // 禁止滚动，出现‘无更多数据’
      visible:false,
      selpage: 0,
      mockData: [],
      defaultItemChecked: [],
      url:'/upms/user/selPersonList',
    };
  },
  mounted() {},
  methods: {
    doSelect(){      
      this.visible=true;
      this.initDefCheckItem();
    },
    handleOk(key, keyItem){
      if(key.length===0){
        this.$message.warning('请先选择人员');
        return;
      }
      if(this.limit>0 && key.length>this.limit){
        this.$message.warning('最多只能选择'+this.limit+'名人员');
        return;
      }
      this.$emit('setPersonSelResult',keyItem);
      this.visible=false;
    },
    handleCancel(){
      this.visible=false;
    },
    /**
     * 查询数据源 
     */
    initMockData(query, page) {
      var vm = this
      if (page) {
        vm.selpage = page;
      } else {
        vm.selpage += 1;
      }      
      const params = {
        keyword: query || '',
        pageNo: vm.selpage,
        pageSize: 10,
        // targetKeys: this.originTargetKeys.join(','),
        projectBuildId: '',
      }
      getAction(this.url, params)
        .then((res) => {
          if (res.code == 0 || res.code == 200 || res.success) {
            if (res.result != null && res.result.records != null) {
              res.result.records.forEach((record) => {
                record.key = record.username                
              })             
              if (vm.selpage != 1) {
                res.result.records = vm.mockData.concat(res.result.records);
              }
              vm.mockData = res.result.records;
              vm.scrollDisabled = vm.mockData.length >= res.result.total;
            } else {
              vm.$message.warning('加载穿梭框选项为空')
            }
          } else {
            vm.$message.warning('加载穿梭框选项异常:' + (res.message || res.msg))
          }
        })
        .catch((res) => {
          vm.$message.warning('加载穿梭框选项出错:' + (res.message || res.msg))
        })
    },
    /**
     * 初始选中数据object 
     */
    initDefCheckItem(){
      var vm = this;
      if(vm.originTargetKeys.length == 0){
        vm.initMockData('', 1);
        return;
      }
      getAction(vm.url, { ids: vm.originTargetKeys.join(',') })
        .then((res) => {
          if (res.code == 0 || res.code == 200 || res.success) {
            if (res.result != null) {
              res.result.records.forEach((record) => {
                record.key = record.username
              })
              const list = res.result.records.filter(item=>{
                return vm.originTargetKeys.includes(item.username)
              })
              this.defaultItemChecked = list
            }
          } else {
            vm.$message.warning('初始化穿梭框已选选项异常:' + (res.message || res.msg))
          }
          vm.initMockData('', 1);
        })
        .catch((res) => {
          vm.$message.warning('初始化穿梭框已选选项出错:' + (res.message || res.msg))
        })
    }
  },
};
</script>
<style lang="less" scoped>
.hd-model{ position: fixed;z-index:1000;left: 0;top: 0;width: 100%;height: 100%;opacity: .5;background: #000;}
.panel span{
  &:first-child{min-width: 100px;display: inline-block;}
}
</style>